<template>
  <div class="time-package" ref="time">
    <div>{{content}}</div>
    <div>{{price}}</div>
  </div>
</template>
<script>
export default {
  name: 'timePackage',
  props: {
    content: String,
    price: Number,
    disabled: Boolean
  },
  data() {
    return {
      flag: false
    }
  },
  methods: {
    getTargetDiv(e) {
      if(!this.disabled) {
        console.log(e.currentTarget.parentElement.style.backgroundColor);
        e.currentTarget.parentElement.style.backgroundColor = '#389B4E';
        e.currentTarget.parentElement.style.color = '#fff';
      }else {
        e.currentTarget.parentElement.style.backgroundColor = '#fff';
        e.currentTarget.parentElement.style.color = '#333';
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.time-package {
  // background-color: #eee;
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: $height*1.2;
  line-height: $height*1.2;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-top: 10px;
  div {
    width: 100%;
    &:nth-of-type(2) {
      text-align: right;
      font-size: 18px;
      &::after {
        content: '元';
        font-size: 14px;
      }
    }
  }
}
</style>